import React from 'react'
import { View, Clipboard, CameraRoll } from 'react-native'
import ViewShot from 'react-native-view-shot';
import { Lt, Color, Nav, Label, Jpp, Button, Fimage, Dialog, cSys, Jx } from "./_utils"
import { Net, NET_GET, NET_RI, NET_NT } from "./_net"
import { cUtil } from './_util';
import { cShare } from './_share';

// 客服
export class PageKefu extends React.PureComponent{
    constructor(props){
        super(props);

        this.state = {
            data : {
                image:"",
                name:Jpp.questionMark,
                account:Jpp.questionMark,
            },
        }
        this.isLoaded = false;
        this.onLoadEnd = this.onLoadEnd.bind(this);
        this.onSave = this.onSave.bind(this);
        this.onCopy = this.onCopy.bind(this);

        cSys.promiseCapturePermission(true);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle:"客服",
    }
    componentWillMount(){
        Net.request("advice/customer", null, {NET_GET, NET_NT, NET_RI}).then(r=>{
            if(r.data){
                this.setState({data:r.data});
            }
        });
    }
    onLoadEnd(){
        this.isLoaded = true;      
    }
    onSave(){
        if(!this.shot || !this.isLoaded){
            Dialog.toast("正在生成二维码,请稍后");
            return;
        }
        cShare.promiseCapture(this.shot).then(image=>{
            cSys.toCameraRoll(image, true);
        });
    }
    onCopy(){
        const {data} = this.state;
        Clipboard.setString(data.account);
        Dialog.toast("已复制到剪贴板")
    }
    render(){
        const {data} = this.state;
        return <View style = {{flex:1,backgroundColor:Color.back}}>
            <Nav.StatusBar />
            <View style={{flex:0.8, justifyContent:"center", alignItems:"center"}}>
                <ViewShot style = {{width:Jpp.width/2,height:Jpp.width/2}} ref={r=>this.shot=r}>
                    <Fimage style = {{width:Jpp.width/2,height:Jpp.width/2}} uri = {data.image} onLoadEnd={this.onLoadEnd}/>
                </ViewShot>
                <Label style = {{marginVertical:Lt.margin, fontSize:Lt.c16, color:Color.c3}}>微信客服: {data.name}</Label>
                <Label style = {{color:Color.c6}}>服务时间:周一至周五9:00-18:00</Label>
                <View style = {{marginTop:30, flexDirection:"row", justifyContent:"space-around"}}>
                    <Button.Pure1 title={"保存二维码"} onPress={this.onSave} style = {{
                        paddingHorizontal:20,
                    }}/>
                    <Button.Pure1 title={"复制微信号"} onPress={this.onCopy} style = {{
                        paddingHorizontal:20, marginLeft:30,
                    }}/>
                </View>
            </View>
        </View>
    }
}